<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="head&kk.css">
	<style>
		.content{
			background-image: url(img/21.png);
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;    
		    height:491px;  
		    z-index: 1;
		}
		.bg_one img{
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;   
			width: 237px;
			height: 237px;
			position: absolute;
			z-index: 2;
			padding-top: -140px;
			margin-left: -80px
		}
		.bg_two img{
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;   
			width: 335px;
			height: 335px;
			position: absolute;
			z-index: 3;
			padding-top:100px;
			margin-left: -5px;
			opacity:0.3;
		}
		.text{
			color: rgb(216, 167, 111);
			text-align: center;
			font-size: 12px;
			position: absolute;
			padding-top: 300px;
			padding-left: 90px;
		}
		.text div{
			height:20px;
			line-height: 20px;
		}
		.bg_three img{
			margin-left: 45px; 
			margin-top: 265px; 
			width: 232px; 
			height: 144px;
		}
		.bg_four img{
			margin-left: 220px;
    		margin-top: -80px; 
		}
		.bye{
			color: rgb(216, 167, 111);
			text-align: center;
			font-size: 12px;
			position: absolute;
			padding-left: 145px;
    		padding-top: 360px;
		}
	</style>
</head>
<body>
	<div class="page">
	<svg xmlns="http://www.w3.org/2000/svg" width="322" height="48" viewBox="0 0 322 48" style="margin-bottom: -4px;"><path fill="#F6F9FA" d="M0 48v-4.052C0 23.389 16.911 8.571 37.225 6.723c0 0 61.917-3.723 123.819-3.723 61.872 0 123.73 3.723 123.73 3.723C305.329 8.571 322 23.389 322 43.948V48"/></svg>
		<!-- 头部 -->
		<div class="header">
			<h1 class="head_name">邀请函</h1>
		</div>
		<!-- 内容 -->
		<div class="content">
			<!-- 音频图标 -->
			<div class="icon">
				<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
			</div>
			<div class="auds">
			<!-- 音频文件 -->
				<audio src="i/1.mp3" controls="controls" autoplay="autoplay" id="audio" >
				</audio>
			</div>
			<!-- 背景图 -->
			<div id="family">
				
				<div class="bg_one">
					<img src="img/34.png" alt="">
				</div>
				<div class="bg_two">
					<img src="img/32.png" alt="">
				</div>
				<div class="text" >
					<div><span>老妖制作</span></div>
					<div><span>恭喜你看到了一个坑</span></div>
					<div><span>看到了一个无底洞</span></div>
					<div><span>看到了照猫画老虎</span></div>
					<div><span>哦，不！</span></div>
					<div><span>这是......</span></div>
					<div><span>照猫画耗子吧？</span></div>
					<div><span>谢谢观看老妖的自言自语</span></div>
				</div>
				<div class="bye" style="display: none;">
					<span>再见！</span>
				</div>
				<div class="bg_three" style="display: none;" >
					<img src="img/31.png" alt="">
				</div>
				<div class="bg_four" style="display: none;">
					<img src="img/33.png" alt="">
				</div>
			</div>
		</div>
		<svg xmlns="http://www.w3.org/2000/svg" width="322" height="45" viewBox="0 0 322 45"><path fill="#F6F9FA" d="M322 0v4.052c0 20.559-16.671 35.377-37.225 37.225 0 0-61.857 3.723-123.73 3.723-61.902 0-123.819-3.723-123.819-3.723C16.911 39.429 0 24.611 0 4.052V0"/></svg>
	</div>

	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".bg_one img").animate({left:'125px'},"4000");
			$(".text").animate({bottom:'520px'},"slow");
			$(".bg_three").fadeIn(2000);
			$(".bg_four").fadeIn(4000);
			$(".bye").fadeIn(6000);
			$(".icon").click(function(){
				var audioEle=$("#audio")[0];
				audioEle.play();
				audioEle.pause();
			})
	
		})
	</script>
</body>
</html>